<template>
  <div class="header drag">
    <div class="logo">多维数据智能分析系统</div>
    <div class="menu no-drag"></div>
    <div class="control">
      <div class="user-container">
        <div class="line"></div>
        <a-dropdown trigger="click" placement="bottom">
          <div class="user no-drag">
            <img class="avatar" src="@/assets/images/avatar.png" alt="avatar" />
            <div class="text">{{ userStore.userInfo?.nickname }}</div>
            <i class="more iconfont icon-hamburger-button"></i>
          </div>
          <template #overlay>
            <a-menu>
              <a-menu-item @click="handleChangePassword">修改密码</a-menu-item>
              <a-menu-item @click="handleLogout">退出登录</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
        <div class="line"></div>
      </div>
      <div class="button-group no-drag">
        <a-space>
          <a-button type="text">
            <template #icon>
              <i class="button iconfont icon-minus"></i>
            </template>
          </a-button>
          <a-button type="text">
            <template #icon>
              <i class="button iconfont icon-maximize"></i>
            </template>
          </a-button>
          <a-button type="text">
            <template #icon>
              <i class="button iconfont icon-close"></i>
            </template>
          </a-button>
        </a-space>
      </div>
    </div>
  </div>
  <ChangePassword v-if="changePasswordOpen" v-model="changePasswordOpen"></ChangePassword>
</template>

<script setup lang="ts" name="name">
import { ref } from "vue";
import { useUserStore } from "@/stores";
import ChangePassword from "./children/ChangePassword.vue";

const userStore = useUserStore();
// 修改密码弹窗
const changePasswordOpen = ref(false);

// 修改密码
const handleChangePassword = () => {
  changePasswordOpen.value = true;
};
// 退出登录
const handleLogout = () => {
  userStore.logout();
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 10px;
  background-color: #3074f2;
  .logo {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
  }
}
.control {
  display: flex;
  align-items: center;
  height: 30px;
  .user-container {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-right: 20px;
    .user {
      display: flex;
      align-items: center;
      height: 34px;
      padding: 0 15px;
      color: white;
      &:hover {
        opacity: 0.7;
      }

      cursor: pointer;
      .text {
        padding: 0 15px;
        font-size: 16px;
        line-height: 26px;
      }
      .more {
        width: 22px;
        font-size: 20px;
      }
    }
    .line {
      width: 2px;
      height: 34px;
      background-color: #6fa0f9;
    }
  }
  .button-group {
    display: flex;
    align-items: center;
    .button {
      color: white;
      cursor: pointer;
      &:hover {
        opacity: 0.7;
      }
    }
  }
}
</style>
